<script setup lang="ts">
import LEchart from '@/pagesReport/lime-echart/components/l-echart/l-echart.vue'
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { useReportStore } from '@/stores'
import type { weekReport } from '@/types/report'
const props = defineProps<{
  type: string
}>()
const lineChart = ref()
const reportStore = useReportStore()
const heartIndexdata = ref<number[]>([])
const AHIdata = ref<number[]>([])
const morningPulse = ref<number[]>([])
const xAxis = ref<string[]>([])
//类似于心跳呼吸图，在没有数据的点设置为null 
const handleWeekreport = (data: weekReport) => {
  console.log(data)
  heartIndexdata.value = []
  AHIdata.value = []
  morningPulse.value = []
  xAxis.value = []
  //console.log(reportStore.wreport)
  data.forEach((item) => {
    if (item.heartHealthIndex !== -1) {
      heartIndexdata.value.push(item.heartHealthIndex)
    } else if (item.heartHealthIndex === -1) {
      heartIndexdata.value.push(null)
    }
    if (item.ahi !== -1) {
      AHIdata.value.push(item.ahi)
    }else if (item.ahi === -1) {
      AHIdata.value.push(null)
    }
    if (item.morningPulse !== -1) {
      morningPulse.value.push(item.morningPulse)
    } else if (item.morningPulse === -1) {
      morningPulse.value.push(null)
    }
    //只保留月份和日期
    xAxis.value.push(item.dateStr.slice(6, 10))
    polylineoption.value.xAxis.data = xAxis.value
  })
  //console.log(xAxis.value)
  console.log(heartIndexdata.value)
}
const polylineoption = ref({
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: xAxis.value,
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name:'',
      type: 'line',
      data: [] as number[],
      label: {
        show: true,
        position: 'top',
      },
      axisLabel: {
        interval: 0,
      },
    },
  ],
})
const judge = () => {
  if (props.type === 'AHI') {
    polylineoption.value.series[0].name='AHI'
    polylineoption.value.series[0].data = AHIdata.value
  } else if (props.type === 'morningPulse') {
    polylineoption.value.series[0].name='晨脉'
    polylineoption.value.series[0].data = morningPulse.value
  } else if (props.type === 'heartIndex') {
    polylineoption.value.series[0].name='心血管健康指数'
    polylineoption.value.series[0].data = heartIndexdata.value
  }
}
onMounted(async () => {
  //console.log(props.type)
  if (reportStore.wreport) handleWeekreport(reportStore.wreport)
  judge()
  const polylinechart = await lineChart.value.init(echarts)
  polylinechart.setOption(polylineoption.value)
})
watch(
  () => reportStore.wreport,
  async (newReport) => {
    if (newReport) {
      handleWeekreport(newReport)
      judge()
      const polylinechart = await lineChart.value.init(echarts)
      polylinechart.setOption(polylineoption.value)
    }
  },
)
</script>
<template>
  <view v-if="props.type === 'heartIndex'" class="week-tittle">心血管健康指数</view>
  <view v-if="props.type === 'AHI'" class="week-tittle">AHI趋势</view>
  <view v-if="props.type === 'morningPulse'" class="week-tittle">晨脉</view>
  <view class="week-chart">
    <LEchart ref="lineChart"></LEchart>
  </view>
</template>
<style lang="scss"></style>
